<template>
  <div class="my-info mainContainer">
      <div class="warpwer">
          <div class="user_information">
              <el-container>
                  <el-aside class="User_level">
                      <!-- 个人信息 -->
                      <el-card shadow="always" style="padding: '21px 0px',
          width: '170px',
          height: '218px',
          margin: '0 auto',">
                          <el-avatar icon="el-icon-user-solid" :size="100" fit="fill" style="
             {
              margin: '0 auto';
            }
          "></el-avatar>
                          <div class="yonghum">1503433_coDS</div>
                          <el-tag class="ml-2">lv.1</el-tag>
                          <div class="temperature">
                              <div class="follow">
                                  <span class="wenzi">0</span>
                                  <span>关注</span>
                              </div>
                              <div class="fans">
                                  <span class="wenzi">0</span>
                                  <span>粉丝</span>
                              </div>
                          </div>
                      </el-card>
                      <!-- 资源动态 -->
                      <!-- <el-card shadow="always" :body-style="{ padding: '20px' }" class="dynamic">
                  资源动态
              </el-card> -->
                      <div class="dynamicContainer">
                          <div class="dynamic active"><span>资源动态</span></div>
                      </div>
                      <!-- 导航栏 -->
                      <el-card shadow="always" :body-style="{ padding: '20px' }">
                        <div
                                class="dynamic"
                                @click="router.push({name:'Member'})"
                            ><span>我的会员</span></div>
                            <div
                                class="dynamic"
                                @click="router.push({name:'Purse'})"
                            ><span>我的钱包</span></div>
                            <div
                                class="dynamic"
                                @click="router.push({name:'Coupons'})"
                            ><span>我的优惠券</span></div>
                            <div
                                class="dynamic"
                                @click="router.push({name:'OrderFrom'})"
                            ><span>我买的订单</span></div>
                            <div class="dynamic">
                                <el-menu mode="vertical">
                                    <el-sub-menu
                                        index="1"
                                        :expand-open-icon="ArrowDown"
                                        :collapse-close-icon="ArrowRight"
                                    >
                                        <template #title>
                                            <span>我卖的</span>
                                        </template>
                                        <el-menu-item
                                            v-for="(submenus, index) in menus"
                                            :index="index + 1"
                                            :key="index"
                                            @click="cheeckIt"
                                        >
                                            {{submenus}}
                                        </el-menu-item>
                                    </el-sub-menu>
                                </el-menu>
                            </div>
                        </el-card>
                      <!-- 我的资料 -->
                      <!-- <el-card class="resources" shadow="always" :body-style="{ padding: '20px' }">
                  我的资源
              </el-card> -->
                      <div class="resourcesContainer">
                          <div class="dynamic"><span @click="router.push({name:'Mydata'})">我的资料</span></div>
                      </div>
                  </el-aside>
                  <div class="right">
                      <div class="rightTop"><span >我的资料</span></div>
                      <Resource></Resource>
                      <!-- 右侧下边搜索区域 -->
                      <div class="Searchbg">
                          <router-view></router-view>
                      </div>

                  </div>

                  <!-- <router-view></router-view> -->

              </el-container>
          </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import Search from './pages/mine/search/index.vue'
import Member from './pages/mine/member/index.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue';
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
const router = useRouter();
const menus = ref(['订单管理', '商品管理', '客户管理', '代收款', '优惠管理', '评价管理', '保证金'])
// 点击我卖的每一项的回调
const cheeckIt = (event: any) => {
    // index

}
</script>

<style scoped>
.mainContainer {
  min-height: 900px;
  height: 100%;
  margin: 10px auto;
  width: 1200px;
}
/* 我的主体盒子 */
.my-info {
  width: 100%;
}

/* 版心宽度 */
.warpwer {
  width: 1200px;
  margin: 0 auto;
}

.user_information {
  background-color: #f5f7f9;
}

.User_level {
  width: 170px;
  /* background-color: aqua; */
}

.yonghum {
  text-align: center;
  margin-right: 15px;
}

.ml-2 {
  background-color: #ff31ac;
  width: 41px;
  height: 20px;
  color: #f5f7f9;
  /* text-align: center; */
  margin-left: 35px;
}

.temperature {
  display: flex;
  justify-content: space-evenly;
  height: 32px;
}

.temperature span {
  height: 20px;
  width: 85px;
  display: block;
}

.follow span {
  margin-left: 45px;
}

.follow .wenzi {
  padding-left: 8px;
}


/* 左边的资源动态  */
.dynamicContainer {
  background: #fff;
  border-radius: 4px;
  padding: 5px 21px;
  margin: 10px 0;
}

.dynamic:hover::after {
  margin: 10px 0;
  background-color: #f93684;
}

.dynamic::after {
  content: ' ';
  position: absolute;
  width: 4px;
  height: 37px;
  left: -20px;
  top: 6px;
}

.active::after {
  content: ' ';
  position: absolute;
  width: 4px;
  height: 37px;
  left: -20px;
  top: 6px;
  background-color: #f93684;
}

.dynamic {
  height: 50px;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  position: relative;
  display: block;
  text-decoration: none;
  line-height: 50px;
  text-align: left;
  position: relative;
}
::v-deep .el-menu {
    border: none;
}


/* 我的资料 */
.resourcesContainer {
  background: #fff;
  border-radius: 4px;
  padding: 5px 21px;
  margin: 10px 0;
}


/* 右侧资源动态 */
.right {
  padding: 0;
  margin-left: 10px;
}

.rightTop {
  width: 1029px;
  height: 72px;
  background: #fff;
  border-radius: 5px;
  padding-left: 28px;
  text-align: center;

}

.rightTop span {
  display: block;
  height: 20px;
  width: 85px;
  padding-top: 20px;
}

/* Searchbg搜索相关的配置 */
.Searchbg {
  width: 1029px;
  margin-top: 20px;
  background: #fff;
  height: 600px;
}

.el-card__body {
  height: 600px;
}


.searchInput {
  height: 40px;
  width: 270px;
}

.form {
  margin: 0;
  display: flex;
}

.formItem {
  margin: 0 5px;
  font-size: 25px;
}
</style>
